<!--
 * @Description: 预警信息详情
 * @Author: hanyu
 * @Date: 2022-03-14 21:45:46
 * @LastEditTime: 2022-03-16 20:01:32
 * @LastEditors: hanyu
-->
<template>
    <div class='detail-box'>
        <div class="row-item">
            连接
            <a @click="openLink" style="margin-left:20px">{{value.link}}</a>
        </div>
        <div class="row-item">
            类别
            <span style="margin-left: 20px">{{value.category}}</span>
        </div>
        <div class="row-item">
            抓取时间
            <span style="margin-left: 20px">{{value.created_at | toDateString}}</span>
        </div>
        <div class="row-item">
            快照地址
            <a style="margin-left: 20px" @click="onShowDetail">查看快照</a>
        </div>
        <div class="row-item">
            所属网站
            <span @click="openLink" style="margin-left: 20px">{{value.main}}</span>
        </div>
        <Modal v-model="showModal" footer-hide width="80%" title="查看快照">
            <div style="padding: 20px">
                <div style="text-align:left;padding-bottom: 100px">
                    <p>违规情况：</p>
                    <p>主体：{{value.main}}</p>
                    <p>链接：<a @click="openLink"> {{value.link}}</a></p>
                    <p>涉及类别：{{value.category}}</p>
                    <p>涉及词：{{value.word}}</p>
                </div>
                <div v-html="value.snapshot" style="width: 100%">
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from 'moment'
export default {
  filters: {
    toDateString(date) {
      return moment(date).format('YYYY-MM-DD hh:mm')
    },
  },
  data() {
    //这里存放数据
    return {
      showModal: false
    };
  },
  props: {
    value: {
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
  },
  //方法集合
  methods: {
    onShowDetail() {
      const words = this.value.word.split('|')
      // let aa = this.value.snapshot
      if(!this.value.snapshot){
        this.$Message.warning('暂无快照')
        return
      }
      for (const item of words) {
        this.value.snapshot = this.value.snapshot.replace(new RegExp(item, 'g'), '<b style="color:black;background-color:#ffff66">' + item + '</b>')
      }
      // console.log(aa);
      // this.value.snapshot = aa
      this.showModal = true
      this.$forceUpdate()
    },
    openLink() {
      window.open(this.value.link)
    }
  },
}
</script>
<style lang='less' scoped>
.detail-box {
  width: 100%;
  height: 100%;
  background: #fff;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  height: 80vh;
  font-size: 20px;
  text-align: left;
  .row-item {
    width: 100%;
    margin-top: 10px;
  }
}
</style>